<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{/layui1/css/layui.css}">
    <script th:src="@{/layui1/layui.js}"></script>

    <style type="text/css">
        .wrapper {
            padding-bottom: 90px;
        }
        .divider {
            position: relative;
            margin-top: 90px;
            height: 1px;
        }
        .div-transparent:before {
            content: "";
            position: absolute;
            top: 0;
            left: 10%;
            right: 10%;
            width: 80%;
            height: 1px;
            background-image: linear-gradient(to right, transparent, darkgrey, transparent);
        }
        .div-arrow-down:after {
            content: "";
            position: absolute;
            z-index: 1;
            top: -7px;
            left: calc(50% - 7px);
            width: 14px;
            height: 14px;
            transform: rotate(45deg);
            background-color: white;
            border-bottom: 1px solid darkgrey;
            border-right: 1px solid darkgrey;
        }
        .div-tab-down:after {
            content: "";
            position: absolute;
            z-index: 1;
            top: 0;
            left: calc(50% - 10px);
            width: 20px;
            height: 14px;
            background-color: white;
            border-bottom: 1px solid darkgrey;
            border-left: 1px solid darkgrey;
            border-right: 1px solid darkgrey;
            border-radius: 0 0 8px 8px;
        }
        .div-stopper:after {
            content: "";
            position: absolute;
            z-index: 1;
            top: -6px;
            left: calc(50% - 7px);
            width: 14px;
            height: 12px;
            background-color: white;
            border-left: 1px solid darkgrey;
            border-right: 1px solid darkgrey;
        }
        .div-dot:after {
            content: "";
            position: absolute;
            z-index: 1;
            top: -9px;
            left: calc(50% - 9px);
            width: 18px;
            height: 18px;
            background-color: goldenrod;
            border: 1px solid darkgrey;
            border-radius: 50%;
            box-shadow: inset 0 0 0 2px white, 0 0 0 4px white;
        }
    </style>
</head>

<body>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="add">添加</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
</script>

<!--================================添加表单=============================================-->
<form class="layui-form" id="add_sale_form" style="display: none">
    <div style="text-align: center;">
        <div class="layui-inline">
            <label class="layui-form-label" >购买人信息</label>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">证件类型:</label>
        <div class="layui-input-inline">
            <select name="cardType" lay-verify="required">
                <option value="1">身份证</option>
            </select>
        </div>
        <label class="layui-form-label">证件号码:</label>
        <div class="layui-input-inline">
            <input type="text" name="cardNumber" required lay-verify="required|identity" autocomplete="off"
                   class="layui-input card">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">姓名:</label>
        <div class="layui-input-inline">
            <input type="text" name="buyer" required lay-verify="required" autocomplete="off"
                   class="layui-input">
        </div>
        <label class="layui-form-label">性别:</label>
        <div class="layui-input-inline">
            <select name="sex" lay-verify="required">
                <option value="2">未知</option>
                <option value="0">男</option>
                <option value="1">女</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">民族:</label>
        <div class="layui-input-inline">
            <select id="nation1" name="nation" lay-verify="required">
            </select>
        </div>
        <label class="layui-form-label">出生日期:</label>
        <div class="layui-input-inline">
            <input type="date" name="birth" required lay-verify="required" autocomplete="off"
                   class="layui-input date">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">家庭住址:</label>
        <div class="layui-input-block">
            <input type="text" name="homeAddress" required  lay-verify="required" autocomplete="off"
                   class="layui-input" style="width: 500px">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">签发机关:</label>
        <div class="layui-input-inline">
            <input type="text" name="police" required lay-verify="required" autocomplete="off"
                   class="layui-input">
        </div>
        <label class="layui-form-label">工作单位:</label>
        <div class="layui-input-inline">
            <input type="text" name="workplace" required lay-verify="required" autocomplete="off"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">现居地址:</label>
        <div class="layui-input-block">
            <input type="text" name="address" required  lay-verify="required" autocomplete="off"
                   class="layui-input" style="width: 500px">
        </div>
    </div>

    <div class="wrapper">
        <div class="divider div-transparent div-arrow-down"></div>
    </div>


    <div style="text-align: center;">
        <div class="layui-inline">
            <label class="layui-form-label" >散装油信息</label>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">购买数量（升）：</label>
        <div class="layui-input-inline">
            <input type="text" name="buyNum" required lay-verify="required" autocomplete="off"
                   class="layui-input">
        </div>
        <label class="layui-form-label">购买时间：</label>
        <div class="layui-input-inline">
            <input type="date" name="buyTime" required lay-verify="required" class="layui-input">
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">汽油类型：</label>
            <div class="layui-input-inline">
                <select name="oilType" lay-verify="required">
                    <option disabled>请选择油品类型</option>
                    <optgroup label="汽油">
                        <option value="90#">90#</option>
                        <option value="92#">92#</option>
                        <option value="93#">93#</option>
                        <option value="95#">95#</option>
                        <option value="97#">97#</option>
                        <option value="98#">98#</option>
                    </optgroup>
                    <optgroup label="柴油">
                        <option value="0#">0#</option>
                        <option value="-10#">-10#</option>
                        <option value="-20#">-20#</option>
                        <option value="-35#">-35#</option>
                        <option value="+5#">+5#</option>
                        <option value="+10#">+10#</option>
                    </optgroup>
                </select>
            </div>
            <label class="layui-form-label">购买用途：</label>
            <div class="layui-input-inline">
                <input type="text" name="purpose" required  lay-verify="required" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">备注：</label>
            <div class="layui-input-block">
                <textarea name="remark" class="layui-textarea" style="width: 500px"></textarea>
            </div>
        </div>
    </div>


    <div class="layui-form-item" style="text-align: center;">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formAdd">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>

<!--================================编辑表单=============================================-->
<form class="layui-form" action="" id="update_sale_form" lay-filter="update" style="display: none">
    <div style="text-align: center;">
        <div class="layui-inline">
            <label class="layui-form-label" >购买人信息</label>
        </div>
    </div>
    <div class="layui-input-inline">
        <input type="text" name="saleId" autocomplete="off" class="layui-input" style="display: none">
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">证件类型:</label>
        <div class="layui-input-inline">
            <select name="cardType" lay-verify="required">
                <option value="1">身份证</option>
            </select>
        </div>
        <label class="layui-form-label">证件号码:</label>
        <div class="layui-input-inline">
            <input type="text" name="cardNumber" required lay-verify="required|identity" autocomplete="off"
                   class="layui-input" >
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">姓名:</label>
        <div class="layui-input-inline">
            <input type="text" name="buyer" required lay-verify="required" autocomplete="off"
                   class="layui-input">
        </div>
        <label class="layui-form-label">性别:</label>
        <div class="layui-input-inline">
            <select name="sex" lay-verify="required">
                <option value="2">未知</option>
                <option value="0">男</option>
                <option value="1">女</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">民族:</label>
        <div class="layui-input-inline">
            <select id="nation2" name="nation" lay-verify="required">
            </select>
        </div>
        <label class="layui-form-label">出生日期:</label>
        <div class="layui-input-inline">
            <input type="date" name="birth" required lay-verify="required" autocomplete="off"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">家庭住址:</label>
        <div class="layui-input-block">
            <input type="text" name="homeAddress" required  lay-verify="required" autocomplete="off"
                   class="layui-input" style="width: 500px">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">签发机关:</label>
        <div class="layui-input-inline">
            <input type="text" name="police" required lay-verify="required" autocomplete="off"
                   class="layui-input">
        </div>
        <label class="layui-form-label">工作单位:</label>
        <div class="layui-input-inline">
            <input type="text" name="workplace" required lay-verify="required" autocomplete="off"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">现居地址:</label>
        <div class="layui-input-block">
            <input type="text" name="address" required  lay-verify="required" autocomplete="off"
                   class="layui-input" style="width: 500px">
        </div>
    </div>

    <div class="wrapper">
        <div class="divider div-transparent div-arrow-down"></div>
    </div>


    <div style="text-align: center;">
        <div class="layui-inline">
            <label class="layui-form-label" >散装油信息</label>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">购买数量（升）：</label>
        <div class="layui-input-inline">
            <input type="text" name="buyNum" required lay-verify="required" autocomplete="off"
                   class="layui-input">
        </div>
        <label class="layui-form-label">购买时间：</label>
        <div class="layui-input-inline">
            <input type="date" name="buyTime" required lay-verify="required" class="layui-input">
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">汽油类型：</label>
            <div class="layui-input-inline">
                <select name="oilType" lay-verify="required">
                    <option disabled>请选择油品类型</option>
                    <optgroup label="汽油">
                        <option value="90#">90#</option>
                        <option value="92#">92#</option>
                        <option value="93#">93#</option>
                        <option value="95#">95#</option>
                        <option value="97#">97#</option>
                        <option value="98#">98#</option>
                    </optgroup>
                    <optgroup label="柴油">
                        <option value="0#">0#</option>
                        <option value="-10#">-10#</option>
                        <option value="-20#">-20#</option>
                        <option value="-35#">-35#</option>
                        <option value="+5#">+5#</option>
                        <option value="+10#">+10#</option>
                    </optgroup>
                </select>
            </div>
            <label class="layui-form-label">购买用途：</label>
            <div class="layui-input-inline">
                <input type="text" name="purpose" required  lay-verify="required" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">备注：</label>
            <div class="layui-input-block">
                <textarea name="remark" class="layui-textarea" style="width: 500px"></textarea>
            </div>
        </div>
    </div>


    <div class="layui-form-item" style="text-align: center;">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formUpdate">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>

<div class="layui-fluid">
    <!--=============================条件查询==================================-->
    <div class="layui-card" style="padding-top: 30px">
        <form class="layui-form">
            <div class="layui-form">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">购买时间：</label>
                        <div class="layui-inline">
                            <input type="date" class="layui-input" id="beginDate" name="beginDate"placeholder="起始时间">
                        </div>-
                        <div class="layui-inline">
                            <input type="date" class="layui-input" id="endDate" name="endDate" placeholder="结束时间">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">用途</label>
                        <div class="layui-input-inline">
                            <input type="text" class="layui-input" id="purchasePurpose" name="purchasePurpose">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button class="layui-btn" lay-submit="search_submits" lay-filter="search_filter">查询</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </div>
        </form>
    </div>

    <div class="layui-card">
        <table id="demo" lay-filter="test"></table>
    </div>
</div>


<table id="roleTable" lay-filter="tbl" class="layui-table-cell"></table>
</body>
<script>
    layui.use(['table', 'tree', 'util', 'jquery','layer', 'form','laydate'], function () {
        var $ = layui.jquery;
        var table = layui.table;
        var form=layui.form;
        var layer= layui.layer;
        var laydate = layui.laydate;

        //初始化身份证下拉框
        $(function () {
            $.ajax({
                url: "/dic/notionList",
                type: 'get',
                dataType: 'json',
                data:{'i':1},
                success: function (result) {
                    if (result!=null){
                        var res = result.data;
                        for(var i=0;i<res.length;i++){
                            var opt = $("<option value='"+res[i].id+"'>"+res[i].nation+"</option>");
                            var opt1 = $("<option value='"+res[i].id+"'>"+res[i].nation+"</option>");
                            $("#nation1").append(opt);
                            $("#nation2").append(opt1);
                        }
                    }
                    form.render('select');
                }
            });
        })

        //第一个实例
        var myTable = table.render({
            elem: '#roleTable'
            , id: 'tableReload'//重载数据表格
            , page: true //开启分页
            , limit: 10//默认一页显示5条数据
            , limits: [10, 20, 30, 40, 50]//默认一页显示5条数据
            , url: '/sale/saleList' //数据接口
            , toolbar: '#barDemo'//此处的id是html代码段
            , cols: [
                [ //表头
                    {type: 'checkbox', fixed: 'left'}
                    ,{field: 'nation', title: '民族', hide:true}
                    ,{field: 'birth', title: '出生日期', hide:true}
                    ,{field: 'police', title: '签发机关', hide:true}
                    ,{field: 'homeAddress', title: '家庭地址', hide:true}
                    ,{field: 'workplace', title: '工作单位', hide:true}
                    ,{field: 'address', title: '居住地址', hide:true}
                    ,{field: 'saleId', title: '编号', width:'5%'}
                    , {field: 'buyer', title: '姓名', width:'8%'}
                    , {field: 'sex', title: '性別',templet: function(s){
                        if(s.sex == 0){return '男'}else if(s.sex == 1){return '女'}else{return'未知'}}, width:'10%'}
                    ,{field: 'cardType', title: '证件类型',width:'10%' }
                    ,{field: 'cardNumber', title: '证件号码',width:'14%'}
                    , {field: 'oilType', title: '汽油类型', width:'10%'}
                    , {field: 'buyNum', title: '购买数量（升）', width:'10%'}
                    , {field: 'purpose', title: '购买用途', width:'10%'}
                    , {field: 'buyTime', title: '购买时间', width:'10%'}
                    ,{field: 'remark', title: '备注', width:'10%'}
                ]]
        });

        //监听头工具
        table.on('toolbar(tbl)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id)
                , data = checkStatus.data; //获取选中的数据
            switch (obj.event) {
                case 'add':
                    layer.open({
                        title: '添加部门',
                        type: 1,
                        content: $('#add_sale_form'),
                        area: ['700px', '800px']
                    });
                    break;
                case 'edit':
                    if (data.length === 0) {
                        layer.msg('请选择一行');
                    } else if (data.length > 1) {
                        layer.msg('只能同时编辑一个');
                    } else {
                        //将修改前的数据赋值给修改表单
                        form.val('update', {
                            //购买人信息
                            "saleId": data[0].saleId
                            ,"cardType": data[0].cardType
                            ,"cardNumber": data[0].cardNumber
                            , "buyer": data[0].buyer
                            , "sex": data[0].sex
                            , "nation": data[0].nation
                            , "birth": data[0].birth
                            , "homeAddress": data[0].homeAddress
                            , "police": data[0].police
                            , "workplace": data[0].workplace
                            , "address": data[0].address
                            //油品购买信息
                            , "buyNum": data[0].buyNum
                            , "buyTime": data[0].buyTime
                            , "purpose": data[0].purpose
                            , "remark": data[0].remark
                        });
                        layer.open({
                            title: '修改',
                            type: 1,
                            content: $('#update_sale_form'),
                            area: ['700px', '800px']
                        });
                    }
                    break;
                case 'delete':
                    if (data.length === 0) {
                        layer.msg('请选择一行');
                    } else {
                        //多行删除确认提示框
                        layer.confirm('确定删除？', {icon: 3, title: '提示'}, function (index) {
                            $.ajax({
                                url: "/sale/deleteSales",
                                type: "post",
                                data: JSON.stringify(data),
                                contentType: "application/json;charset=UTF-8",
                                dataType: "json",
                                success: function (result) {
                                    if (result.code == 0) {
                                        //关闭弹出层
                                        layer.close(index);
                                        //刷新页面
                                        table.reload('tableReload');
                                        layer.msg('删除成功');
                                    }
                                }
                            });
                        });
                    }
                    break;
            }
        });

        //监听添加表单
        form.on('submit(formAdd)', function (data) {
            $.ajax({
                url: '/sale/saveSale',
                dataType: 'json',
                type: 'post',
                contentType: "application/json;charset=UTF-8",
                data: JSON.stringify(data.field),
                success: function (result) {
                    layer.closeAll();//关闭对话框
                    layer.msg(result.msg);
                    myTable.reload();//重新加载表格数据
                    $("#add_sale_form")[0].reset();
                },
                error:function () {
                    layer.closeAll();//关闭对话框
                    layer.msg(result.msg);
                }
            });
            return false;
        });

        //监听修改表单的提交
        form.on('submit(formUpdate)', function (data) {
            $.ajax({
                url: '/sale/updateSale',
                dataType: 'json',
                type: 'post',
                contentType: "application/json;charset=UTF-8",
                data:  JSON.stringify(data.field),
                success: function (result) {
                    layer.closeAll();//关闭对话框
                    layer.msg(result.msg);
                    myTable.reload();//重新加载表格数据
                },
                error:function () {
                    layer.closeAll();//关闭对话框
                    layer.msg(result.msg);
                }
            });
            return false;
        });

        //监听查询表单的提交事件
        form.on('submit(search_filter)', function(data){
            var formData = data.field;
            var beginDate=formData.beginDate;
            var endDate=formData.endDate;
            var purchasePurpose=formData.purchasePurpose;

            //数据表格重载
            table.reload('tableReload', {
                page: {
                    curr: 1 //重新从第 1 页开始
                }
                , where: {//这里传参  向后台
                    beginDate:beginDate,
                    endDate:endDate,
                    purchasePurpose:purchasePurpose
                }
            });
            return false;//false：阻止表单跳转  true：表单跳转
        });

        //通过点击事件自动把身份证号码转换为日期格式
        $(".date").click(function () {
            var str = $(".card").val();
            $.ajax({
                url: '/staff/fmtDate',
                dataType: 'json',
                //contentType: "application/json;charset=UTF-8",
                type: 'post',
                data: {"str":str},//将js对象转成json串传入到后台
                success: function (result) {
                    console.log(result);
                    if(result.code==0){
                        $(".date").val(result.data);
                    }
                }
            });
        })

    });
</script>
</html>